<template>
  <!-- logo和搜索框 -->
  <LogoAndSearch></LogoAndSearch>

  <!-- 顶部信息栏 -->
  <TopInfo></TopInfo>

  <!-- 导航菜单栏 -->
  <NavMenu></NavMenu>


  <!-- 侧边栏 -->
  <el-menu text-color="#000" style="width: 200px;position: relative;top:100px;left:50px" @open="handleOpen"
    @close="handleClose" router default-active="passenger">

    <!-- 订单中心 -->
    <el-menu-item index="orders">
      <template #title>
        <el-icon>
          <TrendCharts />
        </el-icon>
        <span>订单中心</span>
      </template>
    </el-menu-item>

    <!-- 本人车票 -->
    <el-menu-item index="myticket">
      <template #title>
        <el-icon>
          <List />
        </el-icon>
        <span>本人车票</span>
      </template>
    </el-menu-item>

    <!-- 会员中心 -->
    <el-menu-item>
      <template #title>
        <el-icon>
          <UserFilled />
        </el-icon>
        <span>会员中心</span>
      </template>

    </el-menu-item>

    <!-- 个人信息 -->
    <el-sub-menu index="myinfo">
      <template #title>
        <el-icon><Promotion /></el-icon>
        <span>个人信息</span>
      </template>
      <el-menu-item index="view">查看个人信息</el-menu-item>
      <el-menu-item>账号安全</el-menu-item>
      <el-menu-item>手机核验</el-menu-item>

    </el-sub-menu>

    <!-- 常用信息管理 -->
    <el-sub-menu index="user">
      <template #title>
        <el-icon>
          <Histogram />
        </el-icon>
        <span>常用信息管理</span>
      </template>
      <el-menu-item index="passenger">乘车人管理</el-menu-item>
      <el-menu-item>地址管理</el-menu-item>
    </el-sub-menu>

  </el-menu>

  <!-- 内容区域 -->





  <div style="position: absolute;top:180px;left: 300px;width:80% ;">


    <el-input v-model="input" placeholder="请输入乘客名称" clearable style="width: 200px;margin-right: 20px;" />
    <el-button>查询</el-button>
    <el-table :data="tableData" style="width:1150px" stripe>


      <el-table-column label="序号" width="100" #default="scope">
        <span>{{ 1 + scope.$index }}</span>
      </el-table-column>


      <el-table-column prop="name" label="姓名" width="120" />
      <el-table-column prop="idtype" label="证件类型" width="200" />
      <el-table-column prop="id" label="证件号码" width="200" />
      <el-table-column prop="mobile" label="手机 / 电话" width="200" />
      <el-table-column label="核验状态" width="180">

        <img src="../../assets/verify.png" alt="">
      </el-table-column>
      <el-table-column label="操作" width="150">
        <template #default>
          <!-- <el-button link type="primary" size="small" @click="handleClick(scope.row)">Detail</el-button> -->
          <el-button type="primary" :icon="Edit" />
          <el-button type="danger" :icon="Delete" />

        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">

import NavMenu from '../../components/home/NavMenu.vue'
import TopInfo from '../../components/home/TopInfo.vue'
import LogoAndSearch from '../../components/home/LogoAndSearch.vue'

import { TrendCharts, List, UserFilled, Delete, Edit, Promotion ,Histogram} from '@element-plus/icons-vue'


import { ref } from 'vue'
// import { useRouter } from "vue-router";


// eslint-disable-next-line vue/prefer-import-from-vue
// import { getCurrentInstance } from "@vue/runtime-core";


import { usePassengerStore } from '../../stores/passenger'

// 引入storeToRefs
import { storeToRefs } from 'pinia'

//实例化对象
const passengerStore = usePassengerStore()

const { tableData } = storeToRefs(passengerStore)

passengerStore.queryPassenger();

const handleOpen = (key, keyPath) => {
  console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
  console.log(key, keyPath)
}

let input = ref('')


</script>